<template>
  <page-container>
    <PaginationTable
      ref="pageTableIns"
      :load="loadTableData"
      :form-model="formInline"
      paged
      border="inner"
    >
      <template #header>
        <BreadCrumb />
      </template>
      <template #tools>
        <n-space justify="flex-end">
          <n-button type="primary">新建</n-button>
        </n-space>
      </template>

      <vxe-column title="序号" field="showOrder"></vxe-column>

      <vxe-column title="路由" field="routePath"></vxe-column>

      <vxe-column title="操作" fixed="right" width="160" align="right">
        <template #default> </template>
      </vxe-column>
    </PaginationTable>
  </page-container>
</template>

<script lang="ts" setup>
  import { reactive, ref, onMounted } from 'vue';
  import { getUserPremissionApi } from '@/api/common';

  const pageTableIns = ref<PagenationTableInstance>();

  const formInline = reactive({
    user: '',
    region: ''
  });

  const loadTableData: loadPaginationRequest<typeof formInline> = async () => {
    const { menuList } = await getUserPremissionApi();
    return Promise.resolve({
      dataList: menuList
    });
  };

  onMounted(() => {
    pageTableIns.value?.refresh(true);
  });
</script>

<style lang="less">
  .tree-expand-header {
    line-height: 1;
  }
</style>
